<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">




	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="chrome=1">

	<meta name="viewport" content="width=device-width">

	
	<title>How nth-child Works | CSS-Tricks</title>

	<link rel="shortcut icon" href="http://cdn.css-tricks.com/favicon.ico">

	<link rel="apple-touch-icon" href="http://css-tricks.com/apple-touch-icon.png">

	<link rel="search" type="application/opensearchdescription+xml" href="http://css-tricks.com/opensearch.xml" title="CSS-Tricks Search">

	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/CssTricks">

	<link rel="author" href="https://plus.google.com/101987072260327250694/posts">

	
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.4.7 - http://yoast.com/wordpress/seo/ -->
<meta name="description" content="There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: ul li:nth-child(3n+3) { color: #ccc; } Wha">
<link rel="canonical" href="http://css-tricks.com/how-nth-child-works/">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Real_CSS_Tricks">
<meta name="twitter:description" content="There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:
ul li:nth-child(3n+3) {  
  color: #ccc;
}
What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let's take a look.

It boils down to what is in between those parentheses. nth-child accepts two keywords in …">
<meta name="twitter:title" content="How nth-child Works - CSS-Tricks">
<meta name="twitter:url" content="http://css-tricks.com/how-nth-child-works/">
<!-- / Yoast WordPress SEO plugin. -->

<link rel="alternate" type="application/rss+xml" title="CSS-Tricks » How nth-child&nbsp;Works Comments Feed" href="http://css-tricks.com/how-nth-child-works/feed/">
<link rel="stylesheet" id="jetpack-widgets-css" href="How%20nth-child%20Works%20_%20CSS-Tricks_files/widgets.css" type="text/css" media="all">
<div class="fit-vids-style">­<style>               .fluid-width-video-wrapper {                 width: 100%;                              position: relative;                       padding: 0;                            }                                                                                   .fluid-width-video-wrapper iframe,        .fluid-width-video-wrapper object,        .fluid-width-video-wrapper embed,         .fluid-width-video-wrapper video {           position: absolute;                       top: 0;                                   left: 0;                                  width: 100%;                              height: 100%;                          }                                       </style></div><script type="text/javascript" async="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/quant.js"></script><script type="text/javascript" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/jquery.js"></script>
<link rel="shortlink" href="http://css-tricks.com/?p=5452">
<!-- Better Art Direction Styles -->
<style type="text/css" media="screen">
#nthtable { width: 100%; border-collapse: collapse; margin: 0 0 15px 0; }
#nthtable th, #nthtable td { padding: 3px; border: 1px solid #ccc; text-align: center; }
#nthtable th { background: #FE4902; color: white; font-weight: bold; }
</style>

<style type="text/css">img#wpstats{display:none}</style>  <script>window.jQuery || document.write('<script src="/wp-includes/js/jquery/jquery.js"><\/script>')</script>

      <link rel="stylesheet" href="How%20nth-child%20Works%20_%20CSS-Tricks_files/fonts.css">
  
  <!--[if !IE]><!-->
  <link rel="stylesheet" href="How%20nth-child%20Works%20_%20CSS-Tricks_files/style.css">
  <!--<![endif]-->
  <!--[if lt IE 9]>
  <link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/css/oldie.css">
  <![endif]-->
  <!--[if IE 9]>
  <link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/style.css?v1.2">
  <![endif]-->

  
			<script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/comment-reply.js"></script>
    <script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/showdown-ck.js"></script>
	
	
	
	
	
  
	
	
  
  
	
	
<script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/bsa.js" async="" type="text/javascript"></script><script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/ga.js" async="" type="text/javascript"></script><script async="async" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/s_3469a2a501a9e18091036aa0c89f9dcb.js" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" type="text/javascript"></script><style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}div.bsap_1279518{width:100%;display:block}div.bsap_1279518 a{width:200px}div.bsap_1279518 a img{padding:0}div.bsap_1279518 a em{font-style:normal}div.bsap_1279518 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.bsap_1279518 img{border:0;clear:right;}div.bsap_1279518 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.bsap_1279518 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.bsap_1279518 a{line-height:100%}div.bsap_1279518 a.adhere{width:200px;height:200px;line-height:1600%}html>body div.bsap_1279518 a.adhere{width:198px;height:198px}div.bsap_1279518 img.s{height:0;width:0}</style></head><body class="single single-post postid-5452 single-format-standard user-0">

    <script>
  (function(){
    var bsa = document.createElement('script');
       bsa.type = 'text/javascript';
       bsa.async = true;
       bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
  })();
  </script>
  
  <header id="top" class="top">

  <div class="logo">
    <a href="http://css-tricks.com/">
      CSS<span>-Tricks</span>
    </a>
  </div>

    <a class="top-treehouse-ad" href="http://teamtreehouse.com/redirect/css-tricks">
    <div class="frog-foot-box">
    <svg class="frog-foot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewbox="0 0 409.48 446.978" enable-background="new 0 0 409.48 446.978" xml:space="preserve"><path d="M361.51 82.324c-14.695-8.308-38.162 5.053-52.414 29.844l-25.805 44.9 c-9.43 18.662-8.137 40.9 3.8 58.034l0.752 1.082c11.959 17.2 28 33 33.3 38.7 c3.117 3.3 5.5 7.4 6.8 12.124c4.357 15.584-4.74 31.751-20.324 36.112c-15.584 4.359-31.752-4.738-36.111-20.324 c-1.096-3.912-1.34-7.859-0.848-11.648c0.838-6.439-1.229-16.927-10.461-27.223s-28.102 9.15-34.203 29.149l-0.281 0.9 c-6.102 19.998-9.953 37.45-8.801 39.13c0.686 1 1.3 2.1 1.9 3.147c8.561 16.1 2.4 36.105-13.664 44.7 c-16.108 8.562-36.105 2.444-44.668-13.662c-8.561-16.108-2.443-36.105 13.664-44.667c0.723-0.385 1.454-0.739 2.191-1.064 c1.23-0.541 4.72-8.948 7.748-18.878c3.031-9.932 5.486-17.98 5.486-17.98c0.324-1.057 0.605-2.102 0.861-3.138l16.3-58.202 l-17.435 35.785c-2.066-6.794-5.482-7.036-12.964-1.684c-4.513 3.229-11.974 9.586-15.618 12.2 c-6.844 4.897-12.569 14.408-15.6 20.235c-1.783 3.43-4.281 6.558-7.474 9.146c-12.482 10.128-30.81 8.219-40.937-4.263 c-10.127-12.48-8.218-30.808 4.262-40.935c3.658-2.969 7.821-4.903 12.131-5.841c7.333-1.593 32.271-16.827 47.296-27.578 c2.69-1.924 4.947-3.745 6.783-5.433l40.118-30.468l-34.939 18.879c0 0-3.555-0.36-7.913 0.1 c-12.788 1.419-25.957 3.221-28.445 6.388c-1.472 1.87-3.224 3.568-5.253 5.027c-11.66 8.4-27.924 5.756-36.324-5.906 c-8.402-11.663-5.755-27.928 5.905-36.326c4.812-3.464 10.404-5.049 15.901-4.896c9.353 0.3 34 5.2 54.5 1.6 l5.288-0.937c20.589-3.648 45.238-21.57 55.06-40.03c0 0 9.617-16.893 21.479-37.731c11.863-20.838 10.986-43.664-1.955-50.98 l-23.436-13.25c-11.824-6.685-31.18-6.697-43.013-0.025L22.827 97.395c-11.832 6.671-21.514 23.243-21.514 36.826v177.826 c0 13.6 9.7 30.2 21.5 36.828l161.416 90.997c11.833 6.7 31.2 6.7 43.013-0.025l160.863-90.947 c11.826-6.685 21.502-23.269 21.502-36.853V134.221c0-13.583-9.676-30.168-21.502-36.853 C388.12 97.4 376.2 90.6 361.5 82.324z" class="frog-foot-shape">
    </path>
    </svg></div>
    <div class="top-treehouse-text">
    <h5><span class="treehouse-brand">treehouse : </span> <strong>what would you like to learn today?</strong></h5>
    <div class="treehouse-topics">
      <span>Web Design</span>
      <span>Web Development</span>
      <span>iOS Development</span>
    </div>
    </div>
  </a>
  
  <section class="search" role="search">

    <div class="open-search">
      <a href="#" title="Show search box" role="button">
         <span data-icon="m" aria-hidden="true"></span>
         <span class="screen-reader">Show search box</span>
      </a>
    </div>

    <div class="close-search">
      <form id="search-form" action="/search-results/">

        <div>
          <label for="q" id="search-label" class="screen-reader">Search</label>
          <input aria-labelledby="search-label" id="q" name="q" class="search-field placeholder" placeholder="Search terms..." value="Search terms..." type="search">
          <input value="Search" class="button search-button" type="submit">
        </div>

        <div class="search-parts">
          <strong>Search in:</strong>
          <a data-url="/search-results/" class="active">All</a>
          <a data-url="/search-results/articles/">Articles</a>
          <a data-url="/search-results/forums/">Forums</a>
          <a data-url="/search-results/snippets/">Snippets</a>
          <a data-url="/search-results/video/">Videos</a>

          <a href="#" id="x-search" class="x-search">✕</a>
        </div>

      </form>
    </div>

  </section>

</header>
  <div class="page-wrap">

    <nav class="main-nav" id="main-nav">
  <a href="http://css-tricks.com/" class="home">
    <span data-icon="" aria-hidden="true"></span>Home
  </a>
  <a href="http://css-tricks.com/forums/" class="forums">
    <span data-icon="9" aria-hidden="true"></span>Forums
  </a>
  <a href="http://css-tricks.com/snippets/" class="snippets">
    <span data-icon="Q" aria-hidden="true"></span>Snippets
  </a>
  <a href="http://css-tricks.com/gallery/" class="gallery">
    <span data-icon="p" aria-hidden="true"></span>Gallery
  </a>
  <a href="http://css-tricks.com/video-screencasts/" class="videos">
    <span data-icon="q" aria-hidden="true"></span>Videos
  </a>
  <a href="http://css-tricks.com/almanac/" class="almanac">
    <span data-icon="ó" aria-hidden="true"></span>Almanac
  </a>
  <a href="http://css-tricks.com/downloads/" class="demos">
    <span data-icon="w" aria-hidden="true"></span>Demos
  </a>
  <a href="http://css-tricks.com/lodge/" class="lodge">
    <span data-icon="6" aria-hidden="true"></span>Lodge
  </a>


  <a href="#main-nav" class="show-hide-navigation" id="show-hide-navigation">
    Navigation 'n' Search
  </a>
</nav>
<div class="grid group">

	<section class="blog-posts grid-2-3">

		<article class="module" id="post-5452">

			<h1>How nth-child&nbsp;Works</h1>

			<p class="time">

				Published
				<time datetime="2010-02-08">
					February 8, 2010				</time>

				by Chris Coyier			</p>

			<div class="google-ad">
        				<div id="bsap_1279518" class="bsap_1279518 bsap"><a href="http://stats.buysellads.com/click.go?z=1279518&amp;b=3305598&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.5283276598512219&amp;link=http://www.freshbooks.com/painless-billing/?ref=9282" onmouseover="window.status = 'http://www.freshbooks.com/painless-billing/?ref=9282'; return true;" onmouseout="window.status=''; return true;" class="ad1 odd" title="FreshBooks Cloud Accounting - Sign Up Today For Your Free Trial!" id="bsa_3305598" target="_blank"><img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/163270-1363800073.png" alt="FreshBooks Cloud Accounting - Sign Up Today For Your Free Trial!" width="200" height="200"></a></div>
              </div>

			<p>There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:</p>
<pre rel="CSS"><code class="language-css">ul li:nth-child(3n+3) {  
  color: #ccc;
}</code></pre>
<p>What the above CSS does, is select every third list item inside 
unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does 
that work? And what other kinds of things can you do with nth-child? 
Let's take a look.</p>
<p><span id="more-5452"></span></p>
<p>It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: <strong>even</strong> and <strong>odd</strong>.
 Those should be pretty obvious. "Even" selects even numbered elements, 
like the 2nd, 4th, 6th, etc. "Odd" selects odd numbered elements, like 
1st, 3rd, 5th, etc. </p>
<p>As seen in the first example, nth-child also accepts <em>equations</em>
 in between those parentheses. The simplest possible equation? Just a 
number. If you put simply a number in the parentheses, it will match 
only that number element. For example, here is how to select only the 
5th element:</p>
<pre rel="CSS"><code class="language-css">ul li:nth-child(5) {  
  color: #ccc;
}</code></pre>
<p>Let's get back to the "3n+3" from the original example though. How 
does that work? Why does it select every third element? The trick is 
understanding the "n" and algebraic equation that represents. Think of 
"n" as starting at zero and then a set of all positive integers. Then 
complete the equation. So the 3n is "3xn", and the whole equation 
together is "(3xn)+3". Now substituting in the zero and positive 
integers, we get:</p>
<p>(3 x 0) + 3 = 3 = 3rd Element<br>
(3 x 1) + 3 = 6 = 6th Element<br>
(3 x 2) + 3 = 9 = 9th Element<br>
etc.</p>
<p>How about the :nth-child(2n+1)?</p>
<p>(2 x 0) + 1 = 1 = 1st Element<br>
(2 x 1) + 1 = 3 = 3rd Element<br>
(2 x 2) + 1 = 5 = 5th Element<br>
etc.</p>
<p>Hey wait! That's the same as "odd", so probably don't need to use 
that one very often. But wait now. Haven't we exposed our original 
example as being overly complicated? What if instead of "3n+3", we used 
"3n+0", or even simpler "3n".</p>
<p>(3 x 0) = 0 = no match<br>
(3 x 1) = 3 = 3rd Element<br>
(3 x 2) = 6 = 6th Element<br>
(3 x 3) = 9 = 9th Element<br>
etc.</p>
<p>So as you can see, the matches are exactly the same, no need for the 
"+3". We can use negative n values, as well as use subtraction in the 
equations. For example, 4n-1:</p>
<p>(4 x 0) - 1 = -1 = no match<br>
(4 x 1) - 1 = 3 = 3rd Element<br>
(4 x 2) - 1 = 7 = 7th Element<br>
etc.</p>
<p>Using "-n" values seems a little weird, because if the end result is 
negative there is no match, so you'll need to add to the equation to get
 it back positive again. As it turns out, this is a rather clever 
technique. You can use it to select the "first n elements" with "-n+3":</p>
<p>-0 + 3 = 3 = 3rd Element<br>
-1 + 3 = 2 = 2nd Element<br>
-2 + 3 = 1 = 1st Element<br>
-3 + 3 = 0 = no match<br>
etc. </p>
<p>Sitepoint has a nice reference guide, which includes this <a href="http://reference.sitepoint.com/css/understandingnthchildexpressions">handy-dandy table</a> which I'll shamelessly republish here:</p>
<table id="nthtable">
<thead>
<tr>
<th class="firstcol " id="id13390055">n</th>
<th id="id13383373" class="">2n+1</th>
<th id="id13383378" class="">4n+1</th>
<th id="id13563626" class="">4n+4</th>
<th id="id13571386" class="">4n</th>
<th id="id13563576" class="">5n-2</th>
<th id="id13563582" class="">-n+3</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="id13390055 " class="firstcol " id="id13563600">0</th>
<td headers="id13563600 id13383373 " class="">1</td>
<td headers="id13563600 id13383378 " class="">1</td>
<td headers="id13563600 id13563626 " class="">4</td>
<td headers="id13563600 id13571386 " class="">-</td>
<td headers="id13563600 id13563576 " class="">-</td>
<td headers="id13563600 id13563582 " class="">3</td>
</tr>
<tr>
<th headers="id13390055 " class="firstcol " id="id13567329">1</th>
<td headers="id13567329 id13383373 " class="">3</td>
<td headers="id13567329 id13383378 " class="">5</td>
<td headers="id13567329 id13563626 " class="">8</td>
<td headers="id13567329 id13571386 " class="">4</td>
<td headers="id13567329 id13563576 " class="">3</td>
<td headers="id13567329 id13563582 " class="">2</td>
</tr>
<tr>
<th headers="id13390055 " class="firstcol " id="id13567377">2</th>
<td headers="id13567377 id13383373 " class="">5</td>
<td headers="id13567377 id13383378 " class="">9</td>
<td headers="id13567377 id13563626 " class="">12</td>
<td headers="id13567377 id13571386 " class="">8</td>
<td headers="id13567377 id13563576 " class="">8</td>
<td headers="id13567377 id13563582 " class="">1</td>
</tr>
<tr>
<th headers="id13390055 " class="firstcol " id="id13567425">3</th>
<td headers="id13567425 id13383373 " class="">7</td>
<td headers="id13567425 id13383378 " class="">13</td>
<td headers="id13567425 id13563626 " class="">16</td>
<td headers="id13567425 id13571386 " class="">12</td>
<td headers="id13567425 id13563576 " class="">13</td>
<td headers="id13567425 id13563582 " class="">-</td>
</tr>
<tr>
<th headers="id13390055 " class="firstcol " id="id13405791">4</th>
<td headers="id13405791 id13383373 " class="">9</td>
<td headers="id13405791 id13383378 " class="">17</td>
<td headers="id13405791 id13563626 " class="">20</td>
<td headers="id13405791 id13571386 " class="">16</td>
<td headers="id13405791 id13563576 " class="">18</td>
<td headers="id13405791 id13563582 " class="">-</td>
</tr>
<tr>
<th headers="id13390055 " class="firstcol " id="id13405839">5</th>
<td headers="id13405839 id13383373 " class="">11</td>
<td headers="id13405839 id13383378 " class="">21</td>
<td headers="id13405839 id13563626 " class="">24</td>
<td headers="id13405839 id13571386 " class="">20</td>
<td headers="id13405839 id13563576 " class="">23</td>
<td headers="id13405839 id13563582 " class="">-</td>
</tr>
</tbody>
</table>
<h3>Browser Compatibility</h3>
<p>nth-child is one of those rather unfortunate CSS attributes that is 
caught between nearly full cross-browser compatibility, except for 
completely zero support in IE, even IE 8. So when it comes to it's use, 
if the end result is "progressive enhancement" in some fashion (e.g. 
applying a cool color palette to table rows, for example), then by all 
means, go for it. But you probably shouldn't use it if you are doing 
something more important, like relying on it for site structure. For 
example, removing the right margin from every third box in a three by 
three grid of boxes, so they will fit properly.</p>
<p>One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector <strong>will</strong> work, even in Internet Explorer.</p>
<h3>Still not getting it?</h3>
<p>I'm not a big fan of the phrase "I'm a visual learner". Of course you
 are, everybody is. Visual aids are enormously helpful in situations 
just like this. To help, I put together a little <a href="http://css-tricks.com/examples/nth-child-tester/">nth-child tester page</a>. There, you can type in equations and see the results of what it selects below.</p>
<p>Also see this page of <a href="http://css-tricks.com/9657-useful-nth-child-recipies/">useful nth-child recipes</a> for quick copy-and-paste code on the most common positional selecting needs.</p>

			
		</article>

		<div class="yarpp-related">
<section class="related-posts group">


  
    <div class="module module-related">

      <h2 class="h4">
        <a href="http://css-tricks.com/useful-nth-child-recipies/">
          Useful :nth-child Recipes        </a>
      </h2>

      <p>I get a little giddy when I come across perfect uses for <code>:nth-child</code> or <code>:nth-of-type</code> (<a href="http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">read about the difference</a>). The better you understand them, the more css nerdgasms you get to have!</p>

      <a href="http://css-tricks.com/useful-nth-child-recipies/">Read Article →</a>

    </div>

  
    <div class="module module-related">

      <h2 class="h4">
        <a href="http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">
          The Difference Between :nth-child and :nth-of-type        </a>
      </h2>

      <p>These are different pseudo class selectors that do slightly 
different things. In my opinion, :nth-child is more common but 
:nth-of-type is more useful.</p>

      <a href="http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">Read Article →</a>

    </div>

  

</section>
<img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/e42758635938f2ca7d47dfaa85074d5f.gif">
</div>

    		<div id="bsap_1250418" class="bsap_1250418 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_1945764"><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=1945764&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.21045787309599362&amp;link=http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h" onmouseover="window.status = 'http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/168075-1366362405.png" alt="PSD to HTML conversion" width="120" height="90"></span></a><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=1945764&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.19021239961356318&amp;link=http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h" onmouseover="window.status = 'http://www.psd2html.com/?utm_source=css-tricks.com&amp;utm_medium=banner&amp;utm_campaign=new-p2h'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">PSD to HTML conversion</span><span class="bsa_it_d">PSD2HTML.com with over 370 professionals takes the designs to HTML and beyond</span></a><div style="clear: both;"></div></div><div class="bsa_it_ad ad2 even" id="bsa_542319"><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=542319&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.8481638809893594&amp;link=http://www.foxycart.com/#utm_source=buysellads&amp;utm_medium=banner&amp;utm_campaign=css-tricks&amp;utm_content=120x90_done_right" onmouseover="window.status = 'http://www.foxycart.com/#utm_source=buysellads&amp;utm_medium=banner&amp;utm_campaign=css-tricks&amp;utm_content=120x90_done_right'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/34135-1282003972.gif" alt="Easy + Powerful Ecommerce" width="120" height="90"></span></a><a href="http://stats.buysellads.com/click.go?z=1250418&amp;b=542319&amp;g=&amp;s=&amp;sw=1920&amp;sh=1080&amp;br=firefox,3.6,win&amp;r=0.697901092890239&amp;link=http://www.foxycart.com/#utm_source=buysellads&amp;utm_medium=banner&amp;utm_campaign=css-tricks&amp;utm_content=120x90_done_right" onmouseover="window.status = 'http://www.foxycart.com/#utm_source=buysellads&amp;utm_medium=banner&amp;utm_campaign=css-tricks&amp;utm_content=120x90_done_right'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">Easy + Powerful Ecommerce</span><span class="bsa_it_d">FoxyCart was built to integrate, regardless of your tools or CMS. Find out more.</span></a><div style="clear: both;"></div></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/1098/zone/1250418?utm_source=site_1098&amp;utm_medium=website&amp;utm_campaign=imagetext&amp;utm_content=zone_1250418">ads by BSA</a></span></div></div>
    
					<a href="#" class="button full-width-button view-comments-button" id="view-comments-button">View Comments</a>

<section id="comments">



	<h1 class="h2 comments-title">
		<span aria-hidden="true" data-icon="9"></span>Comments
	</h1>

	<ol class="commentlist group">
		
		<li class="comment even thread-even depth-1" id="li-comment-69589">

      <div class="grid group nopadding comment-wrap" id="comment-69589">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/82cf9a87a747f31d266859823a2e5b71.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://softloads.in/" rel="external nofollow" class="url">Akshay</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69589"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T06:48:23+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>It’s really nothing…<br>
But testing your secondary school Mathematics…<br>
Remember Sequences &amp; Series.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-odd thread-alt depth-1 buried" id="li-comment-69590">

      <div class="grid group nopadding comment-wrap" id="comment-69590">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/b9a3370e3883e3e8448b028e2faaa0ea.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Vincent</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69590"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T06:51:05+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thx for this!</p>
<p>Nice tip!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-even depth-1" id="li-comment-69591">

      <div class="grid group nopadding comment-wrap" id="comment-69591">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/76fd4ac4eadf22f85a1f4614ae87bf07.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://cajebo.com/" rel="external nofollow" class="url">Michael</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69591"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T07:06:15+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Your patience with the rest of us continues to amaze me Chris. </p>
<p>Well written, and more importantly, written in a manner that finally brings clear to me this concept.</p>
<p>And that was ‘without’ the phrase “I’m a visual learner”<br>
:)</p>
<p>Thanks for taking the time to do this, and for your sharing. You’ve definitely paid-it-forward.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-69592">

      <div class="grid group nopadding comment-wrap" id="comment-69592">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/c62a49bf0db3da3f986eb4edbcbc0efd.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://ijlalhasnain.com/" rel="external nofollow" class="url">dandy</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69592"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T07:14:16+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>really nice post. Please place a retweet button in your posts so that it become easy to share on twitter.<br>
Thanks.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor even depth-2" id="li-comment-69595">

      <div class="grid group nopadding comment-wrap" id="comment-69595">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/8081b26e05bb4354f7d65ffc34cbbd67.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://chriscoyier.net/" rel="external nofollow" class="url">Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69595"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T07:23:27+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Not to sound like a wanker here, but retweet buttons take
 all the spirit out of Twitter if you ask me. If you like this 
(thanks!), then go up to the URL bar, copy the URL, go to Twitter, write
 a new tweet in your own words, and share the link. </p>
<p>You might even have a way easier way to tweet (for example on my Mac I
 use Tweetie and I just press Command-Return and I have a new tweet 
window). </p>
<p>This way:</p>
<p>1) It doesn’t rip you away from my site with a pre-filled, soulless tweet</p>
<p>2) People only do it if they sincerely want to share it, and do so with their own voice</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt depth-2" id="li-comment-69597">

      <div class="grid group nopadding comment-wrap" id="comment-69597">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/2b0a93dc132be4bf3b15b50c8a7e8089.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.skilldrick.co.uk/" rel="external nofollow" class="url">Skilldrick</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69597"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T08:01:44+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>That doesn’t sound wankerish, that sounds considered, fair and responsible. Good work :)</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even depth-2" id="li-comment-69615">

      <div class="grid group nopadding comment-wrap" id="comment-69615">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/fef26d620363f0f7d62078c2d3ae565c.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://sffarlenn.net/" rel="external nofollow" class="url">Laneth Sffarlenn</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69615"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T14:21:40+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Hear, hear! Certainly made me rethink my Twitter activities.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt depth-2" id="li-comment-69733">

      <div class="grid group nopadding comment-wrap" id="comment-69733">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/93da7de6d050d44fc04d98ab13022102.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.myunv.com/" rel="external nofollow" class="url">Sunny Singh</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69733"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T18:37:14+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>True, but share buttons don’t necessarily have to be all up in your face, and can prove useful for a lot of people.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even depth-2" id="li-comment-70852">

      <div class="grid group nopadding comment-wrap" id="comment-70852">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/ca85e937926a84231055f0adbaeac6c3.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://tweeaks.com/" rel="external nofollow" class="url">Jared</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-70852"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-21T06:06:38+00:00">February 21, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>touche.<br>
nice post too :)<br>
and nice testing page.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69593">

      <div class="grid group nopadding comment-wrap" id="comment-69593">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/a7bf121ff29c67f31c4d858c81d36570.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.jordanwalker.net/index.php" rel="external nofollow" class="url">Jordan Walker</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69593"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T07:15:20+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Wow, I have never even heard of that CSS selector. I 
thing the idea of progressive enhancement is a key selling point to most
 clients, except the first question out of their mouth is, “How will the
 site look on IE6 on a 800 x 600 screen resolution.” Love technology!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-69594">

      <div class="grid group nopadding comment-wrap" id="comment-69594">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/aaae281a9b889f69ec757457b3643942.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">bill</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69594"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T07:19:40+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>In the meantime, just use jQuery.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69596">

      <div class="grid group nopadding comment-wrap" id="comment-69596">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/727c74658574ffd67a89fe6fdcdbd0bf.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.twitter.com/danjordan" rel="external nofollow" class="url">danjordan</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69596"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T07:41:21+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>One thing I find a bit counter-intuitive about :nth-child
 is that it uses all of the siblings when determining which elements to 
style, but will only style those that match the selector passed to it.</p>
<p>For example, if I have a page of text with p tags, a h1 tag and some 
h2 tags and, for some strange reason, I want to alternate the colours of
 the p tags, nth-child wouldn’t do this successfully.</p>
<p>p:nth-child(2n) would style…</p>
<p>h1<br>
h2<br>
p<br>
p – This paragraph<br>
p<br>
h2<br>
p<br>
p – This paragraph.<br>
p</p>
<p>…which is the 2nd and 5th paragraph. Not what I would expect.<br>
Surely the only elements counted should be the p tags?</p>
<p>Apologies if this doesn’t read too well.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment even depth-2" id="li-comment-69598">

      <div class="grid group nopadding comment-wrap" id="comment-69598">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/727c74658574ffd67a89fe6fdcdbd0bf.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.twitter.com/danjordan" rel="external nofollow" class="url">danjordan</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69598"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T08:26:31+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Turns out I need :nth-of-type instead.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor odd alt depth-2" id="li-comment-69599">

      <div class="grid group nopadding comment-wrap" id="comment-69599">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/8081b26e05bb4354f7d65ffc34cbbd67.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://chriscoyier.net/" rel="external nofollow" class="url">Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69599"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T08:50:40+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Not quite… You’d want to use adjacent sibling combinators:</p>
<p>h1 + p + p { color: red; }</p>
<p><a href="http://css-tricks.com/examples/SecondParagraphAfterHeaders/" rel="nofollow">demo</a></p>
<p>:nth-of-type still would require those headers and paragraphs to be wrapped in a parent of some kind.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment even thread-odd thread-alt depth-1 featured" id="li-comment-69601">

      <div class="grid group nopadding comment-wrap" id="comment-69601">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/7e372bf77f1f33ca520c505d521eaa34.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Awesumness</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69601"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T09:14:04+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>nth-child does not accept equations.<br>
It accepts expressions.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1 buried" id="li-comment-69602">

      <div class="grid group nopadding comment-wrap" id="comment-69602">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/1e66ea83eab6204d445ee162dccf13f8.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.chrispierre.com/" rel="external nofollow" class="url">Chris Pierre</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69602"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T09:27:07+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thanks for the Great Post Chris!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-69605">

      <div class="grid group nopadding comment-wrap" id="comment-69605">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/b71e4a8817979bc3ca9893e052ad7f33.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://azzcatdesign.com/" rel="external nofollow" class="url">Catherine Azzarello</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69605"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T09:55:27+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I was absolutely trying to do this “removing the right 
margin from every third box in a three by three grid of boxes, so they 
will fit properly” last week. And though I knew that I’d need to use js 
to get around IE, I was having trouble getting the equation/expression 
right. For some reason, I had missed the entire Algebra thing.</p>
<p>But thanks to your handy dandy refresher course, I get it now! ;-)</p>
<p>(I took the easy way out and just added the right margin measure to my #wrap div for time being.)</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69616">

      <div class="grid group nopadding comment-wrap" id="comment-69616">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/892d06e51d678388d6b99113ba9c59db.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Matt</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69616"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T14:33:04+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>When it comes to a case where one browser will support 
it, and another won’t. I tend to go with the Javascript option. If it 
doesn’t work well cross browser, it won’t be used as a critical element 
anyway, so implementing it in JavaScript should be a safe way to go. 
Cross browser, but not critical.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-69619">

      <div class="grid group nopadding comment-wrap" id="comment-69619">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/fe209f6053a70efc5b272d22b2810e1b.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.signupandmakemoney.com/" rel="external nofollow" class="url">Greg London</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69619"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T15:19:23+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Cool. I did not know you could do that with css. I might find a use for it in the future.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69620">

      <div class="grid group nopadding comment-wrap" id="comment-69620">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/e86cf869ec0320ef31c12261c3ba9910.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://willvincent.com/" rel="external nofollow" class="url">Will</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69620"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T15:21:42+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Seems like an awesomely simple way to handle 
zebra-striping tabular data.. aside, of course, from IE ruining the 
party as always.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-69621">

      <div class="grid group nopadding comment-wrap" id="comment-69621">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/d8de178c08fe406eceeba711709ed3da.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://twitter.com/bachelorchow" rel="external nofollow" class="url">Ben</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69621"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T15:59:04+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I especially like the “first n elements” method.</p>
<p>Thanks Chris!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69627">

      <div class="grid group nopadding comment-wrap" id="comment-69627">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/8c24cf7d516d12e4cd489a12e4f6cbdd.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.norabrowndesign.com/" rel="external nofollow" class="url">Nora Brown</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69627"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T16:14:29+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>So nice – thanks for putting together this tutorial and 
the tester. I uses nth-child recently on a website to progressively fade
 out older Tweets.<br>
<code>#tweets li:nth-child(2){opacity:.8;} </code><br>
Just a nice little look for good browsers.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-69628">

      <div class="grid group nopadding comment-wrap" id="comment-69628">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/1a139a466ea77cb45df20bcbd985aaa9.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">DexTroN</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69628"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T16:31:59+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Nice work explaining it for us who don’t remember our school math :D</p>
<p>btw it’s called “pseudo” and not “pseduo” like in your first sentence ^^</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69634">

      <div class="grid group nopadding comment-wrap" id="comment-69634">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/dd2d4bb31eadef64e87a7556bbcf070a.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">TeMc</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69634"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-08T19:54:13+00:00">February 8, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Another short little example.</p>
<p>Say you want to style the top 3 and the top 10 in a special way of your top 100 list of something</p>
<p><code># HTML<br>
[ol id=ranking]<br>
 [li]1. Lorem<br>
 [li]2. Isum<br>
 [li]3. etc.<br>
[/ol]</code></p>
<p><code># CSS<br>
#ranking li { default:style; }<br>
#ranking li:nth-child(odd) { zebra:style; }<br>
#ranking li:nth-child(-n+10) { special: styling; }<br>
#ranking li:nth-child(-n+3) { special: styling even better; }</code></p>
<p>You the cascasing and overwriting principle of CSS to style everything the way you want.</p>
<p>Pretty cool, huh ?</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment even depth-2" id="li-comment-69664">

      <div class="grid group nopadding comment-wrap" id="comment-69664">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/7a944399ae36ca6fce3edb940b522ed3.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://nightfirecat.right-0n.com/" rel="external nofollow" class="url">Nightfirecat</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69664"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T04:17:39+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>That looks like it’d be by far the best way to use this selector.</p>
<p>I can’t imagine a lot of use for it otherwise, besides making viewing
 large chunks of the same type of tag a bit less repetitive/monotonous.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-69676">

      <div class="grid group nopadding comment-wrap" id="comment-69676">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/cc6cf33345114f7a9f9093ad161439fa.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.est87.co.uk/" rel="external nofollow" class="url">MaT</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69676"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T06:29:46+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>this is awesome, so many tutorials go way over the complexities surrounding nth-child.</p>
<p>But. Am i correct by saying, s’long as im requesting jquery into my site then the nth-child Will work, with no further work ?</p>
<p>Cheers</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	<ul class="children">

		<li class="comment even depth-2" id="li-comment-69691">

      <div class="grid group nopadding comment-wrap" id="comment-69691">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/dd2d4bb31eadef64e87a7556bbcf070a.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">TeMc</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69691"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T09:57:43+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>No, jQuery doesn’t “fix” anything that’s within your css files.</p>
<p>If you wanna use this the save way, for browsers that work with 
jQuery but not with CSS3, then you gotta do it in jQuery and not in CSS.</p>
<p>For example:<br>
<code></code></p>
<p>$("tr:nth-child(odd)").css("background", "#ff0000");</p>
<p></p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt depth-2" id="li-comment-69692">

      <div class="grid group nopadding comment-wrap" id="comment-69692">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/dd2d4bb31eadef64e87a7556bbcf070a.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">TeMc</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69692"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T09:59:27+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>see also :<br>
<a href="http://api.jquery.com/nth-child-selector/" rel="nofollow">http://api.jquery.com/nth-child-selector/</a></p>
<p>and:</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even depth-2" id="li-comment-69734">

      <div class="grid group nopadding comment-wrap" id="comment-69734">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/93da7de6d050d44fc04d98ab13022102.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.myunv.com/" rel="external nofollow" class="url">Sunny Singh</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69734"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T18:42:57+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>You can also have it apply classes instead, just for IE or browsers that don’t support this.</p>
<p>For example:<br>
<code><br>
$("tr:nth-child(odd)").addClass("nth-child-odd");<br>
</code></p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
</ul>
</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-69704">

      <div class="grid group nopadding comment-wrap" id="comment-69704">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/08584a590651e2cf1c208f70d4da014c.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://bract.us/" rel="external nofollow" class="url">bractus</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69704"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T11:20:09+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I am using jQuery and CSS3 selectors. the nth-child is a very powerful future. </p>
<p>Thanks for your very nice tutorial.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-69707">

      <div class="grid group nopadding comment-wrap" id="comment-69707">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/0503a1059f87e475e0a923ca9d203026.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.tactiledesigngroup.com/" rel="external nofollow" class="url">Marc Coleman</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-69707"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-09T11:31:27+00:00">February 9, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>I’m skinning something today for which this will be EXTREMELY helpful. you rock!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-70008">

      <div class="grid group nopadding comment-wrap" id="comment-70008">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/bd83f50c3c797ac04b60980427722917.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Antonio</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-70008"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-11T11:43:05+00:00">February 11, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>Thanks for sharing this! Learning a ton from your articles!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-70538">

      <div class="grid group nopadding comment-wrap" id="comment-70538">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/259469ed60f945161a150e79a381b26c.jpg" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">Chad</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-70538"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-17T08:12:42+00:00">February 17, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>If you want to unselectively grab all elements within another, you can use </p>
<p>element &gt; :nth-child(blah){}</p>
<p>For instance, I am coding a site that will be updated by people who 
shouldn’t need to know CSS in the future, and in order for pictures and 
text to be pretty within overlays, I needed to style everything but the 
close button and an image to have particular margins. Fortunately, these
 were the first two elements within each overlay, so I could use </p>
<p>div.overlay &gt; :nth-child(n+3){margin:0 10px 5px;}</p>
<p>Thanks for making me think about using nth-child!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1 buried" id="li-comment-70945">

      <div class="grid group nopadding comment-wrap" id="comment-70945">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/5ff8143e5a63a846e0f6650f8f1a2d24.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author">anon</div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-70945"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-02-22T17:33:10+00:00">February 22, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>many thanks for this article, i am realized!!</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-72783">

      <div class="grid group nopadding comment-wrap" id="comment-72783">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/d1a90c2b4a01b9ae6ae87dac9be21795.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://www.cubismdesigns.com/" rel="external nofollow" class="url">Cubism Designs</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-72783"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-03-15T22:49:40+00:00">March 15, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>It’s superb info and i immediate twitt it on twitter to know others. Thanks</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment odd alt thread-even depth-1" id="li-comment-73645">

      <div class="grid group nopadding comment-wrap" id="comment-73645">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/129c2972af3985ece923604790362f9e.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://tomsbigbox.com/" rel="external nofollow" class="url">Tom Walters</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-73645"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-03-28T07:53:22+00:00">March 28, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>This is such great CSS, I just can’t believe that IE 
doesn’t support it. I mean I get why it might not render margin and 
padding the same (to name a few), but it really is awful that it doesn’t
 support such a technique. My life could be made a lot easier if I were 
able to use this for structuring sites…</p>
<p>Thanks anyway :)</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>

		<li class="comment even thread-odd thread-alt depth-1" id="li-comment-73653">

      <div class="grid group nopadding comment-wrap" id="comment-73653">

        <div class="comment-avatar grid-1-5">
          <img alt="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/5f1499278370c1f2b411f9ff5752ebda.png" class="avatar avatar-160 photo" width="160" height="160">        </div>

        <div class="comment-body group grid-4-5">

          <div class="comment-author-wrap vcard">
            <div class="comment-author"><a href="http://jowra.com/" rel="external nofollow" class="url">John</a></div> <div class="comment-time"><a href="http://css-tricks.com/how-nth-child-works/#comment-73653"><span class="screen-reader">Permalink to comment</span>#</a> <time pubdate="" datetime="2010-03-28T15:43:38+00:00">March 28, 2010</time></div>
            
          </div>
          
          <div class="comment-content">

            <p>The tester page ist not so usefull when you’re using 
JavScript to achieve the effects. Someone could think it will work in 
Internet Explorer (with plain CSS).</p>
<p>It would be better to alternate the real CSS via JavaScript (thats <code>setStyle(s)</code> for MooTools, I don’t know the corresponding function in jQuery but it should be <code>.css(...)</code> or something like that) then using JavaScript directly.</p>

            <div class="reply">
                          </div><!-- .reply -->

          </div>
        </div>
      </div>
    
	</li>
	</ol>



<div class="module explanation">
	This comment thread is closed. If you have important information to share, you can always <a href="http://css-tricks.com/contact/">contact me</a>.
</div>


</section>		
	</section>

	<aside class="grid-1-3">

    <div class="module module-image-ad module-treehouse">

    <a href="http://teamtreehouse.com/redirect/css-tricks/sidebar">
    <img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/Treehouse_600x500_02.jpg">
    </a>

    <p class="note">I recommend using <a href="http://teamtreehouse.com/redirect/css-tricks/sidebar">Treehouse</a>
 for learning web design, web development, and iOS development. Their 
structured course-based learning is like a more modern college at about 
1% of the price.</p>

  </div>
  
  <div class="module group module-lodge">
    
  
    <p class="intro-lodge"><a href="http://css-tricks.com/lodge/">The Lodge</a> is a <a href="http://css-tricks.com/wp-login.php">member login</a> only area with access to video training on how to build websites from scratch using the best modern tools.</p>

    <div class="lodge-actions">
      <a href="http://css-tricks.com/lodge/signup/" class="button">Sign up!</a>
    </div>

  
  </div>

    <div class="module module-image-ad">
    <a href="http://ad.doubleclick.net/clk;270735259;96794756;g?http://www.wufoo.com/?utm_source=csstricks&amp;utm_medium=ppc&amp;cmpid=brand&amp;utm_network=d&amp;utm_term=csstricks600x600banner">
      <img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/wufoo-600x600-red.png" alt="">
    </a>
    <p class="note"><a href="http://ad.doubleclick.net/clk;270735316;96794756;a?http://www.wufoo.com/?utm_source=csstricks&amp;utm_medium=ppc&amp;cmpid=brand&amp;utm_network=d&amp;utm_term=csstrickstextlinkwufoo">Wufoo</a>
 is the best online form builder. Build any type of form from the humble
 contact form to a very complex multi-page logic-ridden payment-taking 
form in minutes. Design them to match your site then embed them there. 
Never worry about spam. <a href="http://ad.doubleclick.net/clk;270735352;96794756;a?http://wufoo.com/form-builder/?utm_source=csstricks&amp;utm_medium=ppc&amp;cmpid=brand&amp;utm_network=d&amp;utm_term=csstrickstextlinktryitfree">Try it free!</a><img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/B7043538.gif"></p>
  </div>
  
  <div class="module module-poll">
    <div id="polls-42" class="wp-polls">
	<form id="polls_form_42" class="wp-polls-form" action="/how-nth-child-works/" method="post">
		<p style="display: none;"><input id="poll_42_nonce" name="wp-polls-nonce" value="c7aa2e921a" type="hidden"></p>
		<p style="display: none;"><input name="poll_id" value="42" type="hidden"></p>
		<h4>What is your opinion as to the web designers role in mobile design? <a href="http://css-tricks.com/repoll-whos-responsibility-is-mobile-design/">#</a></h4>

<div id="polls-42-ans" class="wp-polls-ans">

<ul class="wp-polls-ul group">
		<li class="group"><input id="poll-answer-247" name="poll_42" value="247" type="radio"> <label for="poll-answer-247">It is <strong>my job</strong> to make sure the website looks and functions well on mobile devices.</label></li>
		<li class="group"><input id="poll-answer-248" name="poll_42" value="248" type="radio"> <label for="poll-answer-248">It is <strong>the mobile device's job</strong> to make sure my website looks and functions well.</label></li>
		</ul>

<p class="voting-buttons">

<input name="vote" value="   Vote   " class="button" onclick="poll_vote(42);" onkeypress="poll_result(42);" type="button"> &nbsp; <a href="#ViewPollResults" class="button" onclick="poll_result(42); return false;" onkeypress="poll_result(42); return false;" title="View Results Of This Poll">View Results</a>

</p>

</div>
	</form>
</div>
  </div>
  <div class="module module-subscribe">
    <h4>Over 100,000 of the best looking web workers subscribe to CSS-Tricks. Join them?</h4>
    <div class="module-subscribe-buttons">
      <a class="button" href="http://feeds.feedburner.com/CssTricks">
        <span aria-hidden="true" data-icon="S"></span>RSS
      </a>
      <br>
      <a class="button" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=273881728">
        <span aria-hidden="true" data-icon="a"></span>iTunes
      </a>
    </div>
    <a href="http://css-tricks.com/subscription-options/">See all Subscription Options</a>
  </div>

</aside>
</div>
  </div>
  <footer class="site-footer top-footer group">

    <ul class="link-list left-links">
      <li><a href="http://css-tricks.com/contact/">Contact CSS-Tricks<span></span></a></li>
      <li class="space"><a href="http://css-tricks.com/advertising/">Advertise on CSS-Tricks<span></span></a></li>

      <li><a href="http://twitter.com/real_css_tricks">Twitter: real_css_tricks<span></span></a></li>
      <li><a href="http://facebook.com/CSSTricks">Facebook: CSSTricks<span></span></a></li>
      <li><a href="http://www.youtube.com/realcsstricks">YouTube: realcsstricks<span></span></a></li>
      <li class="space"><a href="https://github.com/CSS-Tricks/">GitHub: CSS-Tricks Org<span></span></a></li>

      <li><a href="http://twitter.com/chriscoyier">Twitter: chriscoyier<span></span></a></li>
      <li><a href="http://codepen.io/chriscoyier">CodePen: chriscoyier<span></span></a></li>
      <li><a href="http://dribbble.com/chriscoyier">Dribbble: chriscoyier<span></span></a></li>
      <li><a href="http://pinboard.in/u:chriscoyier">Pinboard: chriscoyier<span></span></a></li>
      <li><a href="http://plus.google.com/101987072260327250694/posts">Google+: chriscoyier<span></span></a></li>
    </ul>

    <ul class="link-list right-links">
      <li><a href="http://css-tricks.com/bookshelf/">The Bookshelf<span></span></a></li>
      <li><a href="http://css-tricks.com/polls/">Poll Archive<span></span></a></li>
      <li><a href="http://css-tricks.com/design-history/">Design Archive<span></span></a></li>
      <li class="space"><a href="http://css-tricks.com/archives/">Article Archive<span></span></a></li>

      <li><a href="http://digwp.com/">Digging into WordPress<span></span></a></li>
      <li><a href="http://www.lynda.com/home/DisplayCourse.aspx?lpk2=67160&amp;utm_medium=affiliate&amp;utm_source=ldc_affiliate&amp;utm_content=524&amp;utm_campaign=CD2269&amp;bid=524&amp;aid=CD2269&amp;opt=">Lynda.com WP Theme Course<span></span></a></li>

      <li><a href="http://quotesondesign.com/">Quotes on Design<span></span></a></li>
      <li class="space"><a href="http://html-ipsum.com/">HTML-Ipsum<span></span></a></li>

      <li><a href="http://css-tricks.com/deals/">Deals<span></span></a></li>
      <li><a class="footer-store-link" href="http://css-tricks.com/store/">The Store<span></span></a></li>
      <li><a href="http://css-tricks.com/license/">The License<span></span></a></li>
    </ul>

  </footer>

  <footer class="site-footer bottom-footer group">

    <div class="bottom-footer-part footer-codepen">
      <a href="http://codepen.io/" class="footer-logo">
        <img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/footer-logo-codepen.png" alt="CodePen Logo">
      </a>
      <p>
        <a href="http://codepen.io/">
          CodePen
        </a>
        is a social code playground for web designers and developers. Build demos, find inspiration, or troubleshoot code. With <a href="http://blog.codepen.io/documentation/pro-features/">CodePen PRO</a> you can teach students, pair program, host files, and more!
      </p>
    </div>

    <div class="bottom-footer-part footer-shoptalk">
      <a href="http://shoptalkshow.com/" class="footer-logo">
        <img src="How%20nth-child%20Works%20_%20CSS-Tricks_files/footer-logo-shoptalk.png" alt="ShopTalk Logo">
      </a>
      <p>
        <a href="http://shoptalkshow.com/">
          ShopTalk
        </a>
         is a podcast about all things web design and development hosted
 by Dave Rupert and me. The show is recorded live and covers the week in
 #hotdrama and listener Q&amp;A.
       </p>
    </div>

  </footer>

  <footer class="site-footer slogan">
    CSS-Tricks* is created, written by, and maintained by <a href="http://chriscoyier.net/">Chris Coyier</a>. It is built on <a href="http://wordpress.org/">WordPress</a>, hosted by <a href="http://www.mediatemple.net/#a_aid=4e25c84480ed2">Media Temple</a> and <a href="http://www.netdna.com/">NetDNA</a>, with fonts by <a href="http://www.typography.com/">H&amp;FJ</a>. *May or may not contain any "CSS" or "Tricks".
  </footer>

		<div style="display: none;">
	<div class="grofile-hash-map-82cf9a87a747f31d266859823a2e5b71">
	</div>
	<div class="grofile-hash-map-b9a3370e3883e3e8448b028e2faaa0ea">
	</div>
	<div class="grofile-hash-map-76fd4ac4eadf22f85a1f4614ae87bf07">
	</div>
	<div class="grofile-hash-map-c62a49bf0db3da3f986eb4edbcbc0efd">
	</div>
	<div class="grofile-hash-map-8081b26e05bb4354f7d65ffc34cbbd67">
	</div>
	<div class="grofile-hash-map-2b0a93dc132be4bf3b15b50c8a7e8089">
	</div>
	<div class="grofile-hash-map-40f8f620f92011ed5a423bdcea4db8a2">
	</div>
	<div class="grofile-hash-map-93da7de6d050d44fc04d98ab13022102">
	</div>
	<div class="grofile-hash-map-ca85e937926a84231055f0adbaeac6c3">
	</div>
	<div class="grofile-hash-map-a7bf121ff29c67f31c4d858c81d36570">
	</div>
	<div class="grofile-hash-map-aaae281a9b889f69ec757457b3643942">
	</div>
	<div class="grofile-hash-map-727c74658574ffd67a89fe6fdcdbd0bf">
	</div>
	<div class="grofile-hash-map-7e372bf77f1f33ca520c505d521eaa34">
	</div>
	<div class="grofile-hash-map-1e66ea83eab6204d445ee162dccf13f8">
	</div>
	<div class="grofile-hash-map-b71e4a8817979bc3ca9893e052ad7f33">
	</div>
	<div class="grofile-hash-map-892d06e51d678388d6b99113ba9c59db">
	</div>
	<div class="grofile-hash-map-fe209f6053a70efc5b272d22b2810e1b">
	</div>
	<div class="grofile-hash-map-e86cf869ec0320ef31c12261c3ba9910">
	</div>
	<div class="grofile-hash-map-d8de178c08fe406eceeba711709ed3da">
	</div>
	<div class="grofile-hash-map-8c24cf7d516d12e4cd489a12e4f6cbdd">
	</div>
	<div class="grofile-hash-map-1a139a466ea77cb45df20bcbd985aaa9">
	</div>
	<div class="grofile-hash-map-dd2d4bb31eadef64e87a7556bbcf070a">
	</div>
	<div class="grofile-hash-map-7a944399ae36ca6fce3edb940b522ed3">
	</div>
	<div class="grofile-hash-map-cc6cf33345114f7a9f9093ad161439fa">
	</div>
	<div class="grofile-hash-map-08584a590651e2cf1c208f70d4da014c">
	</div>
	<div class="grofile-hash-map-0503a1059f87e475e0a923ca9d203026">
	</div>
	<div class="grofile-hash-map-bd83f50c3c797ac04b60980427722917">
	</div>
	<div class="grofile-hash-map-259469ed60f945161a150e79a381b26c">
	</div>
	<div class="grofile-hash-map-5ff8143e5a63a846e0f6650f8f1a2d24">
	</div>
	<div class="grofile-hash-map-d1a90c2b4a01b9ae6ae87dac9be21795">
	</div>
	<div class="grofile-hash-map-129c2972af3985ece923604790362f9e">
	</div>
	<div class="grofile-hash-map-5f1499278370c1f2b411f9ff5752ebda">
	</div>
	</div>
<script type="text/javascript" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/devicepx-jetpack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var pollsL10n = {"ajax_url":"http:\/\/css-tricks.com\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"0","show_fading":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/polls-js.js"></script>

	<script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/e-201322.js" type="text/javascript"></script>
	<script type="text/javascript">
	st_go({v:'ext',j:'1:2.2.5',blog:'45537868',post:'5452',tz:'-7'});
	var load_cmc = function(){linktracker_init(45537868,5452,2);};
	if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
	else load_cmc();
	</script><img id="wpstats" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/g.gif" alt="">
  <script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/global-ck.js"></script>
  <script async="" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/ei.js"></script>

  
  
  <script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-68528-29']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
</script>

<script>
/* <![CDATA[ */
var google_conversion_id = 1017883234;
var google_conversion_label = "BsxVCM7ImAMQ4tSu5QM";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script src="How%20nth-child%20Works%20_%20CSS-Tricks_files/conversion.js">
</script><iframe name="google_conversion_frame" src="How%20nth-child%20Works%20_%20CSS-Tricks_files/a.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" width="300" frameborder="0" height="13" scrolling="no">&lt;img
 height="1" width="1" border="0" 
src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?frame=0&amp;random=1370134457014&amp;cv=7&amp;fst=1370134457014&amp;num=1&amp;fmt=1&amp;label=BsxVCM7ImAMQ4tSu5QM&amp;guid=ON&amp;u_h=1080&amp;u_w=1920&amp;u_ah=1040&amp;u_aw=1920&amp;u_cd=24&amp;u_his=1&amp;u_tz=480&amp;u_java=true&amp;u_nplug=22&amp;u_nmime=179&amp;ref=http%3A//www.google.com.ph/search%3Fq%3Dnth-child+pseudo+selector%26ie%3Dutf-8%26oe%3Dutf-8%26aq%3Dt%26rls%3Dorg.mozilla%3Aen-GB%3Aofficial%26client%3Dfirefox-a&amp;url=http%3A//css-tricks.com/how-nth-child-works/&amp;frm=0"
 /&gt;</iframe>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?value=0&amp;label=BsxVCM7ImAMQ4tSu5QM&amp;guid=ON&amp;script=0">
</div>
</noscript>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk
Content Delivery Network via cdn.css-tricks.com

 Served from: css-tricks.com @ 2013-06-01 17:03:54 by W3 Total Cache --></body></html>